<template>
<main>
    <div class="box">
      <div class="banner">
        <img src="../assets/img/banner4.png" alt="banner">
      </div>
      <div class="choto">
        <div @click="changeActive(0)" :class="['c1',{'background':isActive==0}]">
          <span>农业技术</span>
        </div>
        <div @click="changeActive(1)" :class="['c2',{'background':isActive==1}]">
          <span>经营方式</span>
        </div>
      </div>
      <div class="main">
        <img v-if="isActive == 0" src="../assets/img/main.png" alt="">
        <img v-else src="../assets/img/main1.png" alt="">
      </div>
    </div>
</main>
</template>

<script>
export default {
  data(){
    return{
      isActive: 0,
    }
  },
  methods:{
    changeActive(value){
      let map = {0:0,1:1,2:2}
      this.isActive = map[value]
    }
  }
}
</script>
<style lang="stylus" scoped>
main{
    width 100%
    margin-top 100px
    .box{
        width 100% 
        .banner{
            width 100%
            img{
                width:100%;
                height:700px;
            }
        }
        .choto{
          height:100px;
          margin-top 28px
          width 100%
          display flex
          flex-direction row
          align-items center
          justify-content center
          margin-bottom 30px
          div{
            width:604px;
            height:160px;
            display flex
            justify-content center
            align-items center
            font-size 26px
            font-weight:bold;
            color #010101
            cursor pointer
            span{
              margin-top -20px
            }
          }
        }
        .main{
          img {
            width 100%
            height 2000px
          }
        }
    }
}
.background{
  background: url('../assets/ptai/sanjiao.png') no-repeat;
  background-size 100%;
  color #FDFEFE !important
  font-size 30px !important
}

</style>